<template>
  <div class="returnDetail">
    <div class="detail">
      <div class="card">
        <p class="title">订单信息:
          <el-button v-if="returnDetail.status==0" type="primary" size="mini">待处理</el-button>
          <el-button v-if="returnDetail.status==1" type="warning" size="mini">退货中</el-button>
          <el-button v-if="returnDetail.status==2" type="primary" plain size="mini">已完成</el-button>
          <el-button v-if="returnDetail.status==3" type="info" plain size="mini">已拒绝</el-button>
        </p>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p><span>订单编号:</span>{{ returnDetail.orderSn }}<el-link type="primary" :underline="false" href="" target="_blank">查看订单详情</el-link>
            </p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>退单人姓名:</span>{{ returnDetail.returnName }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>退单理由:</span>{{ returnDetail.reason }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>退单描述:</span>{{ returnDetail.description }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p><span>申请时间:</span>{{ returnDetail.createTime }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p v-if="returnDetail.proofPics" class="proofPics"><span>退单图片:</span>
              <img v-for="item in returnDetail.proofPics" :key="item" style="width:100px;height:100px;margin:0 20px" :src="item" alt="">
            </p>
          </el-col>
        </el-row>
      </div>
      <div class="">
        <p class="title">退货商品:</p>
        <el-table :data="[returnDetail]" border stripe>
          <el-table-column
            prop=""
            label="商品图片"
          >
            <template v-slot="scope">
              <img style="width:100px;height:100px" :src="scope.row.productPic" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="商品描述"
            width="100"
          >
            {{ returnDetail.productName }}
            <p>品牌:{{ returnDetail.productBrand }}</p>
          </el-table-column>
          <el-table-column
            prop="productRealPrice"
            label="商品价格"
          />
          <el-table-column
            prop="productAttr"
            label="商品属性"
          />
          <el-table-column
            prop="productCount"
            label="商品数量"
          />
          <el-table-column
            prop="returnAmount"
            label="总计"
          />
        </el-table>

      </div>
      <div class="card">
        <p class="title">用户信息:</p>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p><span>联系人:</span>{{ returnDetail.returnPhone }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>联系电话:</span>{{ returnDetail.returnPhone }}</p>
          </el-col>
        </el-row>
      </div>
      <div class="card">
        <p class="title">费用信息:</p>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p><span>退单金额:</span>{{ returnDetail.returnAmount }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>运费金额:</span>0</p>
          </el-col>
        </el-row>
        <el-form v-if="returnDetail.status==0" ref="form" :model="form" :inline="true" size="mini">
          <el-form-item label="退款金额">
            <el-input-number v-model="form.returnAmount" :min="0" label="描述文字" @change="handleChange" />
          </el-form-item>
          <el-form-item label="处理人">
            <el-input v-model="form.handleMan" />
          </el-form-item>
          <el-form-item label="处理备注">
            <el-input v-model="form.handleNote" />
          </el-form-item>
          <el-form-item class="center">
            <div>
              <el-button type="primary" @click="onSubmit">同意退款</el-button>
              <el-button @click="refuse">拒绝退款</el-button>
            </div>
          </el-form-item>
        </el-form>

      </div>
      <div v-if="returnDetail.status==1 || returnDetail.status==2 || returnDetail.status==3" class="card">
        <p class="title">处理结果:</p>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p><span>处理人:</span>{{ returnDetail.handleMan }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>处理备注:{{ returnDetail.handleNote }}</span>0</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>处理时间:{{ returnDetail.handleTime }}</span></p>
          </el-col>
        </el-row>
        <el-form v-if="returnDetail.status==1" :model="form1" :inline="true" size="mini">
          <el-form-item label="收货人">
            <el-input v-model="form1.receiveMan" />
          </el-form-item>
          <el-form-item label="收货备注">
            <el-input v-model="form1.receiveNote" />
          </el-form-item>
          <el-form-item class="center">
            <div>
              <el-button type="primary" @click="onReceive">确认收货</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="returnDetail.status==2" class="card">
        <p class="title">收货信息:</p>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p><span>退单收货人:</span>{{ returnDetail.receiveMan }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>退单收货备注:{{ returnDetail.receiveNote }}</span>0</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p><span>退单收货时间:{{ returnDetail.receiveTime }}</span></p>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>

<script>
import { orderReturn, agreeApply, receiveProduct, rejectApply } from '@/api/orderManage/returnDetail/index'
export default {
  name: 'VueAdminTemplateMasterIndex',

  data() {
    return {
      returnDetail: {},
      form: {
        id: this.$route.query.id,
        handleMan: '',
        handleNote: '',
        returnAmount: ''
      },
      form1: {
        id: this.$route.query.id,
        receiveMan: '',
        receiveNote: ''
      }
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    onReceive() {
      receiveProduct(this.$route.query.id, this.form1).then(res => {
        this.$router.push('/orderManage/returnList')
      })
    },
    refuse() {
      rejectApply(this.$route.query.id, this.form).then(res => {
        this.$router.push('/orderManage/returnList')
      })
    },
    onSubmit() {
      agreeApply(this.$route.query.id, this.form).then(res => {
        this.$router.push('/orderManage/returnList')
      })
    },
    handleChange(e) {
      console.log(e)
    },
    init() {
      orderReturn(this.$route.query.id).then(res => {
        var str = ''
        JSON.parse(res.data.orderReturnApply.productAttr).forEach(itm => {
          str += itm.key + ':' + itm.value + ' '
        })
        res.data.orderReturnApply.productAttr = str
        res.data.orderReturnApply.proofPics = res.data.orderReturnApply.proofPics.split(',')
        console.log(res.data.orderReturnApply.proofPics)
        this.returnDetail = res.data.orderReturnApply
      })
    }
  }
}
</script>

<style scoped lang="scss">
.returnDetail{
    overflow: hidden;
    background-color: #f0f2f5;
    font-size: 14px;
    .detail{
        background-color: #fff;
        margin: 30px;
        padding: 20px;

        .center{
            display: flex;
            justify-content: center;
        }

        span{
            margin-right: 10px;
        }

        .card{
            border-bottom: 1px solid #dcdfe6;
            padding: 20px 0;
        }
        .title{
            font-size: 16px;
            font-weight: 700;
        }

        .proofPics{
            display: flex;
            align-items: start;
        }
    }
}
</style>
